@black: #000000;
@light-black: lighten(@black, 22%);  // #383838

.light-modal {
  &.is-snippet-viewer, &.is-post-viewer {
    > .wrapper > .box {
      min-width: 600px;
      max-width: 1200px;
      width: 60%;
    }
  }
}

.light-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  z-index: @z-index-modal;
  background-color: rgba(57, 60, 64, .8);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;

  height: 100%;
  line-height: 1.6em;
  overflow: auto;
  color: @light-black;
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;

  > .wrapper {
    padding: 60px 0;
    overflow: auto;
  }

  > .wrapper > .box {
    width: 600px;
    background-color: white;
    border-radius: 3px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;

    & > .title {
      padding: 17px 20px;
      border-bottom: 1px solid lighten(@black, 90%);
      text-align: center;

      .name {
        font-size: 18px;
        color: @light-black;
      }

      .ti-remove {
        float: right;
        font-size: 20px;
        cursor: pointer;
      }
    }
  }
}

// In & Out transition
.light-modal.fade-enter .box {
  transform: translate(0, -40px);
}
.light-modal.fade-enter-active .box {
  transform: translate(0, 0) scale(1);
  transition: transform 200ms ease-in-out;
}
.light-modal.fade-leave .box {
  transition: all 150ms ease-in-out;
}
.light-modal.fade-leave-active .box {
  opacity: 0.01;
  transform: translate(0, -40px);
}

